<template>
    <div class="compliant">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>核心业务管理</el-breadcrumb-item>
        <el-breadcrumb-item>报修信息管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>

        <el-card>
            <el-container>
                <!--        头部表单-->
                <el-header>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="报修类型">
                            <el-select v-model="formInline.repId" placeholder="报修类型">
                                <el-option label="无" value=-1></el-option>
                                <el-option v-for="repairType in repairTypes" :label="repairType.type"
                                           :value="repairType.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="处理状态">
                            <el-select v-model="formInline.status" placeholder="处理状态">
                                <el-option label="无" value='-1'></el-option>
                                <el-option label="待处理" value=0></el-option>
                                <el-option label="已处理" value=1></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-header>
                <el-divider></el-divider>
                <!--        体部表单-->
                <el-main>
                    <template>
                        <el-table
                                ref="multipleTable"
                                :data="repairs"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="repType"
                                    label="报修类型"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="remarks"
                                    label="报修内容"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="owerName"
                                    label="报修人"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="repDate"
                                    label="报修时间"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="处理状态">
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.status==1">已处理</el-tag>
                                    <el-tag type="danger" v-else>待处理</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="clrName"
                                    label="处理人"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-popconfirm
                                            v-if="scope.row.status==0"
                                            confirm-button-text='好的'
                                            cancel-button-text='不用了'
                                            icon="el-icon-info"
                                            icon-color="red"
                                            title="您确定此条报修已完成处理？"
                                            @confirm="handle(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference" size="mini" type="primary" style="margin-left:8px">
                                            处理
                                        </el-button>
                                    </el-popconfirm>
                                    <el-popconfirm
                                            confirm-button-text='好的'
                                            cancel-button-text='不用了'
                                            icon="el-icon-info"
                                            icon-color="red"
                                            title="您确定删除此条报修吗？"
                                            @confirm="handleDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference" size="mini" type="danger" style="margin-left:8px">
                                            删除
                                        </el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-button size="medium" type="danger" style="margin-top: 30px" @click="bathDelete">批量删除</el-button>
                    <template>
                        <div class="block">
                            <el-pagination
                                    background
                                    @current-change="handleCurrentChange"
                                    :current-page="paginations.page_index"
                                    :page-size="paginations.page_size"
                                    :total="paginations.total"
                                    layout="total, prev, pager, next, jumper"
                            >
                            </el-pagination>
                        </div>
                    </template>
                </el-main>
            </el-container>
        </el-card>
    </div>


</template>

<script>


    import axios from "axios";

    export default {

        data() {
            return {
                paginations: {
                    page_index: 1, //当前页
                    total: 200, //总数
                    page_size: 5, //一页显示多少
                },
                formInline: {
                    repId: "-1",
                    status: '-1'
                },
                repairTypes: [
                    {
                        id: 0,
                        type: "小区环境问题",
                    }
                ],
                repairs: [{
                    id: 0,
                    //投诉类型
                    repType: '',
                    //投诉日期
                    repDate: '',
                    //投诉人
                    owerName: "",
                    //处理状态
                    status: 0,
                    //处理人
                    clrName: "",
                    //投诉内容
                    remarks: ""
                },],
                multipleSelection: [{}],
                jsonResult:{
                    state:"",
                },
            }
        },
        created: function () {
            this.loadRepair(1,this.paginations.page_size);
            this.loadRepairType();
        },
        methods: {
            handleCurrentChange(val) {
                this.paginations.page_index = val;
                console.log(`当前页: ${this.paginations.page_index},每页大小${this.paginations.page_size}`);
                this.loadRepair(this.paginations.page_index,this.paginations.page_size);
            },
            bathDelete() {
                let deleteRepairArr = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    //获取点击批量删除时,选中的项目的id
                    deleteRepairArr[i] = this.multipleSelection[i].id
                }
                axios.post("http://localhost:8080/repair/deleteRepair/", deleteRepairArr).then((response) => {
                    this.jsonResult = response.data;
                    if (this.jsonResult.state == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.loadRepair()
                    } else this.$message.error(this.jsonResult.message)
                })
            },
            onSubmit() {
                if (this.formInline.status == -1 && this.formInline.repId == -1) {
                    this.loadRepair()
                } else {
                    axios.get("http://localhost:8080/repair/screenRepair/" + this.formInline.repId + "/" + this.formInline.status)
                        .then((response) => {
                            this.jsonResult = response.data;
                            this.repairs=this.jsonResult.data;
                            console.log(this.repairs)
                        })
                }
            },
            //更改选择
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //处理报修
            handle(index, repair) {
                axios.get("http://localhost:8080/repair/handleRepair/" + repair.id).then((response) => {
                    this.jsonResult=response.data
                    if (this.jsonResult. state== 200) {
                        this.$message({
                            message: '处理成功',
                            type: 'success'
                        })
                        this.loadRepair();
                    } else this.$message.error("请先登录");
                })
            },
            handleDelete(index, repair) {
                let ids=[]
                ids[0]=repair.id
                axios.post("http://localhost:8080/repair/deleteRepair/" ,ids).then((response) => {
                    this.jsonResult = response.data;
                    if (this.jsonResult.state == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.loadRepair();
                    } else this.$message.error("您没有权限删除该条投诉,请联系管理员");
                })
            },
            loadRepair(pageNum, PageSize) {
                axios.get(`http://localhost:8080/repair/loadRepair/${pageNum}/${PageSize}`).then((response) => {
                    console.log(response.data.data)
                    this.repairs=response.data.data.list;
                    this.paginations.total=response.data.data.total
                })
            },
            loadRepairType() {
                axios.get("http://localhost:8080/repair/loadRepairType").then((response) => {
                    let jsonResult = response.data;
                    this.repairTypes=jsonResult.data;
                })
            }
        }

    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .el-table .cell {
        text-align: center;
    }
    .block {
        display: inline-block;
        float: right;
        margin-top: 30px;
    }
</style>